<template>
  <view>
    <u-navbar title="账户设置" title-size="36" title-color="#333"></u-navbar>
    <view class="page-avatar">
      <button
        class="btn-normal"
        open-type="chooseAvatar"
        @click="onClickAvatar()"
        @chooseavatar="onChooseAvatar"
      >
        <view class="dis-flex flex-column flex-x-center flex-y-center">
          <u-avatar :src="avatarUrl" size="180" />
          <text @click="onClickAvatar()" style="font-size: 24rpx">点击修改头像</text>
        </view>
      </button>
    </view>
    <!-- 表单组件 -->
    <view class="form-wrapper">
      <u-form :model="form" ref="uForm" label-width="140rpx">
        <view class="nickname-wrapper">
          <u-form-item label="昵称" prop="nickname" style="position: relative; flex: 1">
            <u-input
              input-align="right"
              v-model="form.nickname"
              type="nickname"
              maxlength="30"
              placeholder="请输入昵称"
              @input="onInputnickname"
              @blur="onInputnickname"
            />
          </u-form-item>
          <u-icon
            name="/static/more.png"
            style="margin-bottom: 2rpx; margin-left: 10rpx"
            size="26"
          ></u-icon>
        </view>
        <view class="nickname-wrapper">
          <u-form-item label="手机号" style="position: relative; flex: 1">
            <u-input input-align="right" v-model="userInfo.mobile" disabled="disabled" />
          </u-form-item>
          <u-icon
            name="/static/more.png"
            style="margin-bottom: 2rpx; margin-left: 10rpx"
            size="24"
          ></u-icon>
        </view>

        <!-- <u-form-item label="身份类型">
          <u-input v-model="userInfo.level.name" disabled="disabled" />
        </u-form-item> -->
      </u-form>
    </view>

    <view class="form-wrapper">
      <view class="xieyi-item dis-flex" @click.stop.prevent="onPolicy('service_agreement')">
        <text>用户协议</text>
        <u-icon
          name="/static/more.png"
          style="margin-bottom: 2rpx; margin-left: 10rpx"
          size="26"
        ></u-icon>
      </view>
      <view class="xieyi-item dis-flex" @click.stop.prevent="onPolicy('privacy_policy')">
        <text>隐私政策</text>
        <u-icon
          name="/static/more.png"
          style="margin-bottom: 2rpx; margin-left: 10rpx"
          size="26"
        ></u-icon>
      </view>
    </view>
    <!-- 操作按钮 -->
    <view class="footer">
      <view class="btn-wrapper">
        <view class="btn-item btn-item-edit" :class="{ disabled }" @click="handleLogout">
          退出登录
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { BASE_URL, UP_URL } from '@/common/config.js'

export default {
  data() {
    return {
      // 按钮禁用
      disabled: false,
      // 头像路径 (用于显示)
      avatarUrl: '',
      // 临时图片 (用于上传)
      tempFile: null,
      // 表单数据
      form: {
        avatarId: '',
        nickname: ''
      },
      // 验证规则
      // rules,
      userInfo: {
        phone: '',
        level: {
          name: ''
        }
      }
    }
  },
  onLoad() {
    // 获取当前用户信息
    this.getUserInfo()
  },
  methods: {
    onPolicy(key) {
      this.$utils.route({
        url: '/universal/webcontent/webcontent',
        params: {
          key
        }
      })
    },
    // 获取当前用户信息
    getUserInfo() {
      this.$u.api.getUserInfo().then((res) => {
        this.userInfo = res.data
        this.avatarUrl = res.data.avatar
        this.form.nickname = res.data.nickname
      })
    },
    // 点击头像按钮事件
    onClickAvatar() {
      // #ifndef MP-WEIXIN
      this.chooseImage()
      // #endif
    },

    // 选择头像事件 - 仅限微信小程序
    onChooseAvatar({ detail }) {
      // #ifdef MP-WEIXIN
      const app = this
      app.avatarUrl = detail.avatarUrl
      app.tempFile = {
        path: app.avatarUrl
      }
      app.uploadAvatar()
      // #endif
    },

    uploadAvatar() {
      const app = this
      uni.uploadFile({
        url: BASE_URL + UP_URL,
        filePath: app.tempFile.path,
        name: 'file',
        // #ifdef MP-ALIPAY
        fileType: 'image',
        // #endif
        success: function (res) {
          const json = JSON.parse(res.data)
          // console.log(json)
          app.updateInfo({
            avatar: json.data
          })
        },
        fail: function (err) {
          console.log('上传失败', JSON.stringify(err))
        }
      })
    },

    // 选择图片
    chooseImage() {
      const app = this
      // 选择图片
      uni.chooseImage({
        count: 1,
        sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
        sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
        success({ tempFiles }) {
          app.tempFile = tempFiles[0]
          app.avatarUrl = app.tempFile.path
          app.uploadAvatar()
        }
      })
    },

    async updateInfo(params) {
      const app = this
      // 判断是否重复提交
      if (app.disabled === true) return
      app.$u.post('/app-api/member/user/update', params).then((res) => {
        if (res.code === 0) {
          app.$u.toast('修改成功')
        } else {
          app.$u.toast(res.msg)
        }
        app.disabled = false
      })
    },

    // 修改头像
    async avatarChange() {
      const app = this
      // 判断是否重复提交
      if (app.disabled === true) return
      // 提交保存个人信息
    },

    // 退出登录
    handleLogout(callback = null) {
      this.$utils.handleLogout(callback)
    },
    // 绑定昵称输入框 (用于微信小程序端快速填写昵称能力)
    onInputnickname(val) {
      if (val) {
        this.form.nickname = val
        this.updateInfo({
          nickname: this.form.nickname
        })
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.btn-normal {
  margin: 0;
  padding: 0;
  border: 0;
  background-color: #fff;
}

.btn-normal::after {
  position: relative;
  border: none;
}

.container {
}

.page-title {
  width: 94%;
  margin: 0 auto;
  padding-top: 40rpx;
  font-size: 28rpx;
  color: rgba(69, 90, 100, 0.6);
}

.form-wrapper {
  width: 100%;
  margin-top: 20rpx;
  // margin: 20rpx auto 20rpx auto;
  padding: 0 40rpx;
  box-shadow: 0 1rpx 5rpx 0px rgba(0, 0, 0, 0.05);
  // border-radius: 16rpx;
  background: #fff;
}

/* 底部操作栏 */

.footer {
  margin-top: 80rpx;

  .btn-wrapper {
    width: 710rpx;
    height: 80rpx;
    background: $uni-color-warning;
    border-radius: 10rpx;
    margin: auto;
  }

  .btn-item {
    flex: 1;
    font-size: 30rpx;
    height: 80rpx;
    color: #fff;
    border-radius: 50rpx;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .btn-item-wechat {
    background: #0ba90b;
    margin-bottom: 26rpx;
  }

  .btn-item-edit {
    color: #ffffff;
  }

  .btn-item-main {
    // 禁用按钮
    &.disabled {
      opacity: 0.6;
    }
  }
}

.page-avatar {
  width: 100%;
  padding: 20px;
  /* text-align: center; */
  display: flex;
  align-items: center;
  background: #fff;
  justify-content: center;
  flex-flow: column;
  font-size: 30rpx;
  color: #313233;
}

.avatar-des {
  padding: 20rpx;
  font-size: 30rpx;
  color: #313233;
}

.nickname-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.xieyi-item {
  justify-content: space-between;
  padding: 20rpx 0;
  align-items: center;
  box-shadow: 0 1rpx 5rpx 0px rgba(0, 0, 0, 0.05);
  font-size: 28rpx;
  color: #303133;
  box-sizing: border-box;
  line-height: 70rpx;
}

// 退出登录
.my-logout {
  display: flex;
  justify-content: center;
  margin-top: 50rpx;

  .logout-btn {
    width: 60%;
    margin: 0 auto;
    font-size: 28rpx;
    color: #616161;
    border-radius: 20rpx;
    border: 1px solid #dcdcdc;
    padding: 16rpx 0;
    text-align: center;
  }
}

.uni-input-input {
  text-align: right !important;
}

::v-deep .nick .uni-input-input {
  text-align: right !important;
}
</style>
